<template>
    <div class="wrapper">
        <LogReg v-if="$store.state.loginView"></LogReg>
        <!-- 背景 -->
        <div class="h-inner">
            <div class="h-user">
                <div class="avatar-container">
                    <img :src=$store.state.constant.base_url+userList.avatar style="width: 60px;height: 60px;" alt="">
                </div>
                <div class="h-basic">
                    <div class="h-name">{{ userList.nickname }}</div>
                    <div class="h-sign">{{ userList.introduction }}</div>
                </div>
                <div class="h-action" v-if="!isUser">
                    <Button type="primary" class="btn-follow">关注</Button>
                    <Button type="primary" class="btn-msg" ghost>发消息</Button>
                </div>
            </div>
        </div>
        <!-- Tab标签 -->
        <Tabs value="tab-links" class="tab-links">
            <TabPane label="主页" icon="md-home"></TabPane>
            <TabPane label="动态" icon="ios-aperture"></TabPane>
            <TabPane label="投稿" icon="ios-outlet"></TabPane>
            <TabPane label="合集和列表" icon="md-easel"></TabPane>
        </Tabs>
        <!-- 视频 -->
        <div class="feed-card-bottom">           
            <div class="feed-card" v-for="item in videoList">
                <div class="view">
                    <img :src=$store.state.constant.base_url+item.img alt="" style="width: 270px; height: 152px;" @click="$store.commit('goDetail',item.id)">
                </div>
                <div class="h-title">
                    <a href="javascript:void(0);" @click="$store.commit('goDetail',item.id)">{{ item.title }}</a>
                </div>
                <span class="play"><Icon type="ios-arrow-dropright" size="16"/>{{ item.views }}</span>
                <span class="play"><Icon type="ios-barcode-outline" size="16"/>{{ item.comments }}</span>
            </div>
            <div style="clear: both;"></div>
        </div> 
        <!-- 最近点赞的视频 -->
        <div class="section">
            <div class="section-title">最近点赞的视频</div>
            <div class="feed-card-bottom">           
                <div class="feed-card" v-for="item in likeList">
                    <div class="view">
                        <img :src=$store.state.constant.base_url+item.img alt="" style="width: 270px; height: 152px;" @click="$store.commit('goDetail',item.id)">
                    </div>
                    <div class="h-title">
                        <a href="javascript:void(0);" @click="$store.commit('goDetail',item.id)">{{ item.title }}</a>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div> 
        </div>
    </div>
</template>

<script>
import common from '../common.js' 
import LogReg from './LogReg.vue'

export default{
    name:'User',
    components:{
        LogReg
    },
    data(){
        return{
            userList:[],
            videoList:[],
            likeList:[],
            isUser:false
        }
    },
    methods:{
        async getUser(){
            let res
            res=await this.$api.get('getUsers/'+this.$route.params.id)
            this.userList=res.data
            res=await this.$api.get('getVideoByuser/'+this.$route.params.id)
            this.videoList=res.data.result.rows
            //获取每条视频的评论数、格式化播放量
            for(let ele of this.videoList){
                ele.views=common.numChange(ele.views)
                res=await this.$api.get('getCommentByvideo/'+ele.id)
                ele.comments=common.numChange(res.data.result.count)
            }  
            // console.log(this.videoList);           
        },
        async getLike(){
            let res
            let likeArr
            let likeListArr=[]
            res=await this.$api.get('getUsers/'+this.$route.params.id)
            likeArr=res.data.like
            if(likeArr){
                likeArr=likeArr.split(',')
                for(let ele of likeArr){
                    if(ele){
                        res=await this.$api.get('getDetail/'+ele)
                        likeListArr.push(res.data)
                    }
                }
                this.likeList=likeListArr
                console.log(this.likeList);
            }
        },
        checkUser(){
            if(this.$store.state.userInfo){
                if(this.$route.params.id==this.$store.state.userInfo.id){
                this.isUser=true
                this.getLike()
            }else{
                console.log('未登录');
            }
        }
        },
    },
    created(){
        this.checkUser()
        this.getUser()
    }
}   
</script>

<style>
    .wrapper{
        width: 1101px;
        margin: 0 auto;
        top: 64px;
        position: relative;

    }

    .h-inner{
        background-image: url("https://images.weserv.nl/?url=//i0.hdslb.com/bfs/space/cb1c3ef50e22b6096fde67febe863494caefebad.png@2560w_400h_100q_1o.webp");
        background-position: 50%;
        background-size: cover;
        padding-top: 116px;
        position: relative;
    }

    .h-user{
        display: flex;
        position: relative;
        bottom: 0;
        height: 76px;
        width: 100%;
    }

    .avatar-container{
        margin-left: 20px;
        height: 60px;
        width: 60px;
        border-radius: 50%;
        overflow: hidden;
    }

    .h-basic{
        margin-left: 22px;
        height: 76px;
        flex:1;
    }

    .h-action{
        width: 222px;
        height: 47px;
        margin-top: 29px;
    }

    .h-name{
        font-weight: 700;
        line-height: 18px;
        font-size: 18px;
        vertical-align: middle;
        color: #fff;
    }

    .h-sign{
        margin-top: 6px;
        font-size: 12px;
        font-family: Microsoft Yahei;
        line-height: 26px;
        height: 26px;
        color: #fff;
    }

    .btn-follow{
        width: 76px;
        height: 30px;
        background: rgb(242,93,142) !important;
        box-shadow: 0 0 0 2px #fff;
        color: #fff;
        border: none !important;
        margin-right: 20px;
    }

    .btn-follow:hover{
        background:rgb(255,133,173) !important;
    }

    .btn-msg{
        background: rgba(0,0,0,.45) !important;
        box-shadow: 0 0 0 2px hsla(0,0%,100%,.3);
        color: #fff !important;
        border: none !important;
    }

    .btn-msg:hover{
        background: rgba(0,0,0,.55) !important;
    }

    .ivu-tabs-tab{
        padding:20px 16px !important;
    }

    .ivu-tabs-nav .ivu-tabs-tab .ivu-icon{
        width: 30px !important;
        height: 30px !important;
        font-size: 30px !important;
        margin-right: 1px !important;
    }

    .ivu-icon-md-home{
        color: rgb(0,192,145) !important;
    }

    .ivu-icon-ios-aperture{
        color: rgb(251,114,153) !important;
    }
    
    .ivu-icon-ios-outlet{
        color: rgb(2,181,218) !important;
    }

    .ivu-icon-md-easel{
        color: rgb(35,201,237) !important;
    }

    .h-title a{
        font-weight: normal !important;
    }

    .h-title{
        margin-top: 6px;
        transition: height .2s ease;
        height: 19px;
        overflow: hidden;
    }

    .h-title:hover{
        height: 38px;
    }

    .feed-card .play{
        display: inline-block;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        width: 72px;
    }

    .wrapper .feed-card{
        height: 197px;
        overflow: hidden;
    }

    .section-title{
        color: #000;
        font-size: 20px;
        font-weight: 400;
        line-height: 33px;
        height: 33px;
        padding: 0 0 15px;
    }

    .section{
        padding-top: 10px;
        border-top: 1px solid #ccc;
    }

    .section .h-title{
        height: 38px;
        overflow: hidden;
    }
</style>